<template>
	<view class="">
		<u-navbar leftText="返回" title="案件详情">
			<view class="u-nav-slot" slot="left" @click="goBack">
				<view class="navbar-left">
					<u-icon name="arrow-left" size="16"></u-icon>
					<span>返回</span>
				</view>
			</view>
		</u-navbar>
		<view class="pdfArea">
			<iframe class="pdfArea_view" :src="attchDetail.fileUrlNew" frameborder="0"></iframe>
			<view class="pdfArea_upload" :key="uploadKey">
				<view class="pdfArea_upload_tips">
					请您依据答复通知书中的时间规定，对该行政复议申请提出书面答复，并提交当初作出该行政行为的证据、依据和其他有关材料。查看所有待答复案件，可在“工作台” - “市高质量应用” - “法治南昌”
					中查看。<text class="pdfArea_upload_tips_help" @click="popupShow = true">点击查看操作手册</text>
				</view>
				<view class="pdfArea_upload_title">
					<view class="pdfArea_upload_title_text">被申请人答复书及证据材料：</view>
					<lsj-upload v-if="type == 'pend'" class="pdfArea_upload_title_lsj" ref="lsjUpload" :option="option"
						:size="size" :formats="formats" :debug="debug" :instantly="instantly" @uploadEnd="onuploadEnd"
						@progress="onprogre" @change="onChange">
						<u-button type="primary" shape="square" size="mini">上传</u-button>
					</lsj-upload>
				</view>
				<view class="pdfArea_upload_list" v-for="(item,index) in files.values()" :key="index">
					<text class="pdfArea_upload_list_name" @click="preview(item)">{{item.name}}</text>
					<u-button v-if="type == 'pend'" class="pdfArea_upload_list_delete" type="error" shape="circle"
						size="mini" @click="clear(item.name)">删除</u-button>
				</view>
				<u-empty v-if="files.size == 0" class="pdfArea_upload_empty" text="暂未提交相关材料" mode="data"></u-empty>
				<view class="pdfArea_upload_button" v-if="type == 'pend'">
					<u-button @click="openModal" type="primary">提交</u-button>
				</view>
			</view>
		</view>
		<!-- 自定义悬浮 -->
		<movable-area class="fixed-box">
			<movable-view class="fixed-button" direction="all" :inertia="true" x="100" y="100">
				<u-icon class="mainMenu" color="#ffffff" name="download" size="30" @click="downloadFile"></u-icon>
			</movable-view>
		</movable-area>
		<u-modal :show="modalShow" :content='modalContent' showCancelButton confirmText="确认" cancelText="取消"
			closeOnClickOverlay @cancel="modalShow = false" @close="modalShow = false" @confirm="submit"></u-modal>
		<u-popup :show="popupShow" @close="popupShow = false" mode="center" :round="10" class="popupWrap">
			<view class="popupWrap_title">
				操作手册
			</view>
			<view class="popupWrap_step">
				<u-steps direction="column" inactiveColor="#3c9cff">
					<u-steps-item title="第一步" desc="查看左侧南昌市司法局发送过来的行政复议答复通知书。">
					</u-steps-item>
					<u-steps-item title="第二步" desc="点击上传按钮，上传被申请人答复书及证据材料。"></u-steps-item>
					<u-steps-item title="第三步" desc="点击提交按钮，提交材料到南昌市司法局,该条待办办结。"></u-steps-item>
				</u-steps>
			</view>
			<view class="popupWrap_button">
				<u-button @click="popupShow = false" style="width: 100rpx" text="关闭" type="primary"
					size="mini"></u-button>
			</view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		getTodo,
		getAttachByApplyid,
		finishTodo,
		getFileListByApplyId
	} from "@/common/api/respond/respond.js"
	import {
		Tp_procmaterialValue
	} from "@/common/enumeration/Tp_procmaterial.js"
	import LsjUpload from "@/components/pdfUpload/pdfUpload.vue"
	import {
		UPLOAD_URL
	} from "@/common/js/warehouse.js"
	import {
		kkfilePreview
	} from '@/common/js/urils.js';
	export default {
		data() {
			return {
				todoDetail: {}, // 待办详情
				attchDetail: {}, // 材料详情
				pdfSrc: "",
				// 上传接口参数
				option: {
					// 上传服务器地址
					url: UPLOAD_URL,
					// 上传附件的key
					name: 'file',
					// 根据你接口需求自定义请求头,默认不要写content-type,让浏览器自适配
					header: {
						// "Content-Type": "mulitpart/form-data"
					},
					// 根据你接口需求自定义body参数
					formData: {}
				},
				// 选择文件后是否立即自动上传，true=选择后立即上传
				instantly: true,
				// 限制允许上传的格式，空串=不限制，默认为空
				formats: '',
				// 文件上传大小限制
				size: 100,
				// 文件数量限制
				count: 10,
				// 文件回显列表
				files: new Map(),
				// 是否打印日志
				debug: true,
				modalShow: false, // modal弹出层
				modalContent: "提交后无法继续上传相关材料，请核实无误后提交，是否确认？",
				type: "", // 待办 or 已办
				uploadKey: 0,
				popupShow: false,
				staging: null
			}
		},
		components: {
			LsjUpload
		},
		async onLoad(options) {
			this.type = options.type
			if (options.staging) {
				this.staging = options.staging
			}
			await this.getTodoDetail(options.id)
		},
		methods: {
			// 返回
			goBack() {
				uni.navigateBack()
			},
			// 获取待办详情
			async getTodoDetail(id) {
				let res = await getTodo({
					id: id
				})
				if (res.code == 0) {
					if (res.data.pstatus != 100600) {
						this.type = "reply"
					}
					this.todoDetail = res.data
					this.getAttachDetail(res.data.applyid, res.data.mattype)
					if (this.type == 'reply') {
						this.getAttachList(res.data.applyid, Tp_procmaterialValue.HEAR_REPLYLETTER)
					}
				}
				console.log("待办详情", res)
			},
			// 获取材料详情
			async getAttachDetail(applyid, mattype) {
				let res = await getAttachByApplyid({
					applyid: applyid,
					mattype: mattype
				})
				if (res.code == 0) {
					if (res.data && res.data.fileUrl) {
						res.data.fileUrlNew = kkfilePreview(res.data.fileUrl)
					}
					this.attchDetail = res.data
				}
				console.log("材料详情", res)
			},
			// 获取已上传材料附件
			async getAttachList(applyid, mattype) {
				let res = await getFileListByApplyId({
					applyid: applyid,
					mattype: mattype
				})
				if (res.code == 0) {
					if (res.data && res.data.length) {
						res.data.forEach(item => {
							let map = {
								name: item.file.name,
								path: item.file.url,
								type: "success"
							}
							this.files.set(item.file.name, map)
						})
						this.uploadKey++
					}
				}
				console.log("已上传附件信息", res, this.files)
			},
			// 某文件上传结束回调(成功失败都回调)
			onuploadEnd(item) {
				// 更新当前窗口状态变化的文件
				this.files.set(item.name, item);
				// 强制更新视图
				this.$forceUpdate();
				console.log("files", this.files)
			},
			// 上传进度回调,如果网页上md文档没有渲染出事件名称onprogre，请复制代码的小伙伴自行添加上哈，没有哪个事件是只(item)的
			onprogre(item) {
				// 更新当前状态变化的文件
				this.files.set(item.name, item);
				// 强制更新视图
				this.$forceUpdate();
			},
			// 文件选择回调
			onChange(files) {
				// 更新选择的文件 
				this.files = files;
				// 强制更新视图
				this.$forceUpdate();
			},
			// 指定上传某个文件
			resetUpload(name) {
				this.$refs['lsjUpload'].upload(name);
			},
			// 移除某个文件
			clear(name) {
				// name=指定文件名，不传name默认移除所有文件
				this.$refs['lsjUpload'].clear(name);
			},
			// 预览pdf
			preview(item) {
				window.open(item.path)
			},
			// 打开模态框
			openModal() {
				if (this.files.size == 0) {
					this.$refs.uToast.show({
						message: "请先上传被申请人答复书！",
						type: "warning",
						icon: "info"
					})
					return
				}
				this.modalShow = true
			},
			downloadFile() {
				if (!this.attchDetail.fileUrl) {
					this.$refs.uToast.show({
						message: "未获取材料信息！",
						type: "warning",
						icon: "info"
					})
					return
				}
				let url = this.attchDetail.fileUrl
				let fileName = this.attchDetail.fileName
				var x = new XMLHttpRequest()
				x.open('GET', url, true)
				x.responseType = 'blob'
				x.onload = function(e) {
					var url = window.URL.createObjectURL(x.response)
					var a = document.createElement('a')
					a.href = url
					a.download = fileName
					a.click()
				}
				x.send()
			},
			// 提交
			async submit() {
				uni.showLoading({
					title: "提交中"
				})
				this.modalShow = false
				let filesList = []
				this.files.forEach(item => {
					filesList.push(item.file)
				})
				let res = await finishTodo({
					id: this.todoDetail.id
				}, filesList)
				if (res.code == 0) {
					this.$refs.uToast.show({
						message: "保存成功！",
						type: "success",
						icon: "checkmark-circle"
					})
					if (this.staging) {
						setTimeout(() => {
							let description = '您已完成该条待办'
							uni.navigateTo({
								url: "/pages/errPage?description=" + description
							})
						}, 1000)
					} else {
						setTimeout(() => {
							let pages = getCurrentPages()
							let beforePages = pages[pages.length - 2]
							uni.navigateBack({
								success: () => {
									beforePages.reload()
								}
							})
						}, 1000)
					}
				} else {
					this.$refs.uToast.show({
						message: res.data.errorMessage,
						type: "error",
						icon: "close-circle"
					})

				}
				uni.hideLoading()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pdfArea {
		height: calc(100vh - 69rpx);
		width: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-start;
		overflow: auto;

		&_alert {
			border: 1px solid red;
		}

		&_view {
			height: 100%;
			width: 70%;
		}

		&_upload {
			width: 30%;
			height: 100%;
			position: relative;

			&_tips {
				margin: 20rpx;
				border-color: #d49b5f;
				background-color: #fdf6ec;
				padding: 20rpx;
				border-radius: 4rpx;
				font-size: 20rpx;
				color: #606266;

				&_help {
					margin-left: 10rpx;
					color: #2979ff;
					cursor: pointer;
				}
			}

			&_title {
				margin: 20rpx 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				&_text {
					font-weight: 550;
					font-size: 26rpx;
					color: #1F1F1F;
				}
			}

			&_list {
				margin: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;

				&_name {
					color: #2979ff;
					font-size: 20rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					width: 80%;
				}

				&_delete {
					margin-left: 40rpx;
					width: 20%;
					cursor: pointer;
				}
			}

			&_list:last-child {
				margin-bottom: 0;
			}

			&_empty {
				margin-top: 60rpx !important;
			}

			&_button {
				position: absolute;
				bottom: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				padding: 10rpx;
				width: 100%;
			}
		}
	}

	.popupWrap {

		&_title {
			font-size: 28rpx;
			font-weight: 550;
			padding: 20rpx;
		}

		&_step {
			padding: 0 40rpx;
		}

		&_button {
			margin: 20rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.fixed-box {
		pointer-events: none;
		width: 100vw;
		height: 100vh;
		position: fixed;
		right: 0;
		top: 0;
		z-index: 100000;
	}

	.fixed-button {
		pointer-events: auto;
		width: 60rpx;
		height: 60rpx;
		border: 0;
		border-radius: 45rpx;
	}

	.mainMenu {
		width: 60rpx;
		height: 60rpx;
		background-image: linear-gradient(-225deg, #7DE2FC 0%, #B9B6E5 100%);
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 45rpx;
	}
</style>